import React, { ReactNode } from 'react';
import { Text, StyleSheet, View } from 'react-native';

import { ApiStatus } from '@/types.d';

const App = ({ children, params }: { children: ReactNode, params?: any }) => {
    const { name = '', description = '', apiStatus } = params || {};
    // 根据 apiStatus 生成对应的标签
    let statusLabel: ReactNode | null = null;
    if (apiStatus === ApiStatus.Experimental) {
        statusLabel = <Text style={[globalStyles.label, globalStyles.warningColor]}>{t('common.experimental')}</Text>;
    } else if (apiStatus === ApiStatus.Deprecated) {
        statusLabel = <Text style={[globalStyles.label, globalStyles.errorColor]}>{t('common.deprecated')}</Text>;
    }

    return (
        <View style={styles.container}>
            <View style={styles.titleContainer}>
                {statusLabel}
                <Text style={styles.titleText}>{name}</Text>
            </View>
            <Text style={styles.descriptionText}>{description}</Text>
            {children}
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        padding: 12, // 添加内边距，使内容不紧贴容器边缘
        backgroundColor: '#f9f9f9', // 设置背景颜色，增强区分度
        borderRadius: 8, // 设置圆角，使容器更美观
        margin: 8, // 添加外边距，与其他元素保持距离
    },
    titleContainer: {
        flexDirection: 'row',
        alignItems: 'center', // 垂直居中
        justifyContent: 'flex-start', // 从起始位置开始排列
        marginBottom: 8, // 与描述文本隔开
    },
    titleText: {
        fontSize: 20, // 增大标题字体大小
        fontWeight: 'bold', // 加粗标题字体
        color: '#333', // 设置标题字体颜色
    },
    descriptionText: {
        fontSize: 16, // 设置描述文本字体大小
        color: '#666', // 设置描述文本字体颜色
        marginBottom: 16, // 添加底部外边距，与子组件隔开
    },
});

export default App;
